<template>
    <div class="app-container">

        <div class="search-div">
            <el-form label-width="70px" size="small">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="关 键 字">
                            <el-input style="width: 95%" v-model="searchObj.keyword" placeholder="用户名/姓名/手机号码"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="操作时间">
                            <el-date-picker v-model="createTimes" type="datetimerange" range-separator="至"
                                start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"
                                style="margin-right: 10px;width: 100%;" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="display:flex">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData()">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetData">重置</el-button>
                </el-row>
            </el-form>
        </div>

        <!-- 工具条 -->
        <div class="tools-div">
            <el-button type="success" icon="el-icon-plus" size="mini" @click="add" :disabled="$hasBP('bnt.sysUser.add')  === false">添 加</el-button>
        </div>

        <!-- 列表 -->
        <el-table v-loading="listLoading" :data="list" stripe border style="width: 100%;margin-top: 10px;">

            <el-table-column label="序号" width="70" align="center">
                <template slot-scope="scope">
                    {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>

            <el-table-column prop="username" label="用户名" width="180" />
            <el-table-column prop="name" label="姓名" width="110" />
            <el-table-column prop="phone" label="手机" />
            <el-table-column label="状态" width="80">
                <template slot-scope="scope">
                    <el-switch v-model="scope.row.status === 1" @change="switchStatus(scope.row)">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" />

            <el-table-column label="操作" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改" />
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataById(scope.row.id)"
                        title="删除" />
                    <el-button type="warning" icon="el-icon-baseball" size="mini" @click="showAssignRole(scope.row)"
                        title="分配角色" />
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <el-pagination :current-page="page" :total="total" :page-size="limit" style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper" @current-change="fetchData" />
        <el-dialog title="分配角色" :visible.sync="dialogRoleVisible">
            <el-form label-width="80px">
                <el-form-item label="用户名">
                    <el-input disabled :value="sysUser.username"></el-input>
                </el-form-item>

                <el-form-item label="角色列表">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                        @change="handleCheckAllChange">全选</el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="userRoleIds" @change="handleCheckedChange">
                        <el-checkbox v-for="role in allRoles" :key="role.id" :label="role.id">{{ role.roleName
                        }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button type="primary" @click="assignRole" size="small">保存</el-button>
                <el-button @click="dialogRoleVisible = false" size="small">取消</el-button>
            </div>
        </el-dialog>
        <el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%">
            <el-form ref="dataForm" :model="sysUser" label-width="100px" size="small" style="padding-right: 40px;">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="sysUser.username" />
                </el-form-item>
                <el-form-item v-if="!sysUser.id" label="密码" prop="password">
                    <el-input v-model="sysUser.password" type="password" />
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="sysUser.name" />
                </el-form-item>
                <el-form-item label="手机" prop="phone">
                    <el-input v-model="sysUser.phone" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
                <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import api from "@/api/system/user";
export default {
    // 定义数据模型
    data() {
        return {
            listLoading: true, // 数据是否正在加载
            list: [], // 角色列表
            total: 0, // 总记录数
            page: 1, // 页码
            limit: 2, // 每页记录数
            searchObj: {}, // 查询条件
            sysUser: {},
            dialogVisible: false,
            selectValue: [],
            createTimes: [],
            saveBtnDisabled: false,

            dialogRoleVisible: false,
            allRoles: [], // 所有角色列表
            userRoleIds: [], // 用户的角色ID的列表
            isIndeterminate: false, // 是否是不确定的
            checkAll: false // 是否全选
        };
    },
    //页面渲染之前获取数据
    created() {
        this.fetchData();
    },
    // 定义方法
    methods: {
        // 重置表单
        resetData() {
            console.log("重置查询表单");
            this.searchObj = {};
            this.fetchData();
        },
        fetchData(pageNum = 1) {
            this.page = pageNum;
            if (this.createTimes && this.createTimes.length == 2) {
                this.searchObj.createTimeBegin = this.createTimes[0];
                this.searchObj.createTimeEnd = this.createTimes[1];
            }
            // 调用api
            api
                .getPageList(this.page, this.limit, this.searchObj)
                .then((response) => {
                    debugger;
                    this.listLoading = false;
                    this.list = response.data.records;
                    this.total = response.data.total;
                });
        },
        removeDataById(id) {
            this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    return api.removeById(id);
                })
                .then((response) => {
                    this.fetchData(this.page);
                    this.$message.success(response.message || "删除成功");
                })
                .catch((error) => {
                    console.log(error);
                    this.$message.info("取消删除");
                });
        },
        add() {
            this.dialogVisible = true;
            this.sysUser = {};
        },
        saveOrUpdate() {
            if (!this.sysUser.id) {
                this.saveUser();
            } else {
                this.updateUser();
            }
        },
        updateUser() {
            api.updateUser(this.sysUser).then((response) => {
                this.$message.success(response.message || "更新成功");
                this.fetchData(this.page);
                this.dialogVisible = false;
            });
        },
        saveUser() {
            api.saveUser(this.sysUser).then((response) => {
                this.$message.success(response.message || "添加成功");
                this.fetchData(this.page);
                this.dialogVisible = false;
            });
        },
        edit(id) {
            this.dialogVisible = true;
            api.getById(id).then((response) => {
                this.sysUser = response.data;
            });
        },
        handleSelectionChange(selection) {
            this.selectValue = selection;
            console.log(this.selectValue);
        },
        batchRemove() {
            if (this.selectValue.length == 0) {
                this.$message.warning("请选中一行！");
                return;
            } else {
                this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(() => {
                        var ids = [];
                        for (var i = 0; i < this.selectValue.length; i++) {
                            ids.push(this.selectValue[i].id);
                        }
                        return api.batchRemove(ids);
                    })
                    .then((response) => {
                        this.fetchData(this.page);
                        this.$message.success(response.message || "删除成功");
                    })
                    .catch((error) => {
                        console.log(error);
                        this.$message.info("取消删除");
                    });
            }
        },
        switchStatus(row) {
            row.status = row.status == 1 ? 0 : 1;
            api.updateStatus(row.id, row.status).then(response => {
                this.fetchData(this.page);
                this.$message.success(response.message || "操作成功");
            });
        },//展示分配角色
        showAssignRole(row) {
            this.sysUser = row
            this.dialogRoleVisible = true
            api.getRolesById(row.id).then(response => {
                this.allRoles = response.data.allRoles
                this.userRoleIds = response.data.userRoleIds
                this.checkAll = this.userRoleIds.length === this.allRoles.length
                this.isIndeterminate = this.userRoleIds.length > 0 && this.userRoleIds.length < this.allRoles.length
            })
        },

        /*
        全选勾选状态发生改变的监听
        */
        handleCheckAllChange(value) {// value 当前勾选状态true/false
            // 如果当前全选, userRoleIds就是所有角色id的数组, 否则是空数组
            this.userRoleIds = value ? this.allRoles.map(item => item.id) : []
            // 如果当前不是全选也不全不选时, 指定为false
            this.isIndeterminate = false
        },

        /*
        角色列表选中项发生改变的监听
        */
        handleCheckedChange(value) {
            const { userRoleIds, allRoles } = this
            this.checkAll = userRoleIds.length === allRoles.length && allRoles.length > 0
            this.isIndeterminate = userRoleIds.length > 0 && userRoleIds.length < allRoles.length
        },

        //分配角色
        assignRole() {
            let assginRoleVo = {
                userId: this.sysUser.id,
                roleIdList: this.userRoleIds
            }
            api.assignRoles(assginRoleVo).then(response => {
                this.$message.success(response.message || '分配角色成功')
                this.dialogRoleVisible = false
                this.fetchData(this.page)
            })
        }
    },
};
</script>